<template>
  <div class="editGq">
    <el-dialog :visible.sync="centerDialogVisible"
               :fullscreen="true"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog"
               :title="type=='add'?'新增工段':'修改工段'">
      <el-form :model="editData" size="mini" status-icon :rules="rules" ref="editData" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="工段" prop="gqId">
          <el-select v-model="editData.gqId" filterable placeholder="请选择">
            <el-option
              v-for="item in gongquList"
              :key="item.id"
              :label="item.gqName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工位" prop="gwName">
          <el-input v-model="editData.gwName" ></el-input>
        </el-form-item>
        <el-form-item label="工位代码" prop="gwCode">
          <el-input v-model="editData.gwCode" placeholder="请输入大写字母"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('editData')">提交</el-button>
          <el-button @click="resetForm('editData')" style="margin-bottom: 20px">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'editGq',
    props: ['dataDetail','type'],
    data() {
      var notEmpty = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        } else {
          callback();
        }
      };

      var notRepeat = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        } else {
          if(!/^[A-Z]+$/.test(value)&&value.length !=1){
            return callback(new Error('请输入一位大写字母'));
          }
          for(let qw of this.gongWei){
            if(value == qw.gwCode && qw.id!=this.editData.id){
              return callback(new Error('工位代码已经存在'));
            }
          }
          callback();
        }
      };

      return {
        centerDialogVisible: false,
        clickModalHide: false,
        gongquList: [],
        gongWei: [],
        editData: {
          id: "",
          gqId: "",
          gwCode: "",
          gwName:""
        },
        rules: {
          id: [
            {validator: notEmpty, trigger: 'blur'}
          ],
          gwName: [
            {validator: notEmpty, trigger: 'blur'}
          ],
          gwCode: [
            {validator: notRepeat, trigger: 'blur'}
          ],
          gqId: [
            {validator: notEmpty, trigger: 'blur'}
          ]
        },
        count: 0,
      }
    },
    mounted() {
      this.getGongQu();
      this.getGongZhuangName();
    },

    methods: {
      operateGongqu() {
        let self = this;
        let param = self.getParam();
        let url = this.type == 'add'?'/autoMonitor/gw/addGongwei':'/autoMonitor/gw/updateGongwei';
        if (this.count == 0) {
          self.$http({
            url: url,
            method: "post",
            params: param,
          }).then(resp => {
            self.resetForm('editData');
            if (resp.success) {
              self.$eventBus.$emit("updateGongQu");
              self.$notify({
                title: '提示',
                message: "修改成功！",
                type: 'info'
              });
              return
            }
            this.count--;
          });
          this.count++;
        }
      },

      getParam() {
        let param = {};
        param.id = this.editData.id;
        param.gqId = this.editData.gqId;
        param.gwName = this.editData.gwName;
        param.gwCode = this.editData.gwCode;
        return param;
      },
      //关闭弹窗
      closeDialog() {
        this.$refs['editData'].clearValidate();
        this.centerDialogVisible = false;
      },

      submitForm(formName) {
        let self = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.operateGongqu();
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].clearValidate();
        this.closeDialog();
      },


      getGongQu() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gd/queryGongDuanList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.gongquList = resp.result;
          }
        });
      },


      getGongZhuangName() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryGzName",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.gongWei = resp.result;
          }
        });
      },

      getGongWei() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gw/queryAllGw",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.gongWei = resp.result;
          }
        });
      },

    },
    watch: {
      dataDetail(val) {
        this.count = 0;
        this.centerDialogVisible = true;
        for (let key in this.editData) {
          if (!val.hasOwnProperty(key)) {
            val[key] = "";
          }
        }
        this.editData = val;
      }
    }
  }
</script>
<style scoped>
  .editGq .el-dialog__body {
    padding: 0px 20px;
  }

  .editGq .el-form-item {
    margin-bottom: 18px;
  }

</style>
